<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <input type="text" v-model="msg">

        <input type="text" :value="msg" @input="msg = $event.target.value">

        <h1> {{msg}} </h1>
        <hr>

        <!-- 
            v-model 在组件上都是使用 
            会将 modelValue 作为 prop传递，
            并以 update:modelValue 作为对应的事件
         -->
        <com v-model="msg"></com>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                msg: ''
            }
        },
        methods: {},
        components: {
            com: {
                template: `
                    <h1> 
                        com 组件 -- {{modelValue}} 
                        <input @input='input' :value='modelValue' />
                    </h1>
                `,
                methods: {
                    input() {
                        // console.log(event.target.value);
                        // 触发
                        this.$emit('update:modelValue', event.target.value)
                    }
                },
                props: ['modelValue']
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>